<template>
<div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <el-tree style="max-width:600px" :data="roledata" node-key="id" :default-expanded-keys="[1]" :props="defaultProps" @node-click="handleNodeClick" />
      </el-aside>
      <el-main>
        <el-tree ref="treeRef" style="max-width: 600px" :data="menudata" show-checkbox node-key="id" :default-expanded-keys="meunData" :props="defaultProps" :default-checked-keys="menuRoleMIdData" @check-change="getCheckedKeys"/>
        <br/>
        <el-button type="primary" @click="addMenuRole">保存</el-button>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import {useRoute,useRouter} from 'vue-router'
const treeRef = ref<InstanceType<typeof ElTree>>()

const route = useRoute();
const router = useRouter();

onMounted(() => {
  getRoleList()
  getMenuList()
  getMenuRIdList(0)
})

//存储Mid
const menuRoleMIdData:any=ref([])

interface Tree {
  label: string
  children?: Tree[]
}

const defaultProps = {
  children: 'children',
  label: 'label',
}

const form: any = reactive({
  roleId:'',
})

const roleMenuIds:any=[]

const handleNodeClick = (data:any) => {
  console.log(data.id)
  form.roleId = data.id;
  getMenuRIdList(data.id)
}

const getCheckedKeys = () => {
  console.log(treeRef.value!.getCheckedKeys(false))
  roleMenuIds.value = treeRef.value!.getCheckedKeys(false)
}

//角色
const roledata:any =ref([
{
    id: 1,
    label: '角色',
    children: [

    ]
  },
])

//菜单
const menudata:any =ref([
{
    id: 1,
    label: '权限菜单',
    children: [

    ]
  },
])

//角色列表
const getRoleList = () => {
  let role = {}
  axios.post('/api/RoleManagement/SearchRoleInfo',role).then(res=>{
    console.log(res);
    roledata.value[0].children = res.data.data
  }).catch(err=>{
    console.log(err);
    
  })    
}

//菜单列表
const meunData=ref([])
const getMenuList = () => {
  let menu = {}
  axios.post('/api/MenuManagement/SearchMenuInfo',menu).then(res=>{
    //console.log(res);
    menudata.value[0].children = res.data.data
    meunData.value = res.data.data.map((x: any) => x.id)
    //console.log(meunData.value);
    
  }).catch(err=>{
    console.log(err);
    
  })    
}

//保存
const addMenuRole = () => {
  let menuRole = {
    ids: roleMenuIds.value,
    rid:form.roleId
  }
  axios.post('/api/MenuRoleManagement/CreateMenuRole',menuRole).then(res=>{
    console.log(res);
    if (res.data.code>0) {
      ElMessage.success("保存成功!")

    } else {
      ElMessage.error("保存失败!")
      return;
    }
  }).catch(err=>{
    console.log(err);
    
  })    
}

//查询菜单角色MId列表
const getMenuRIdList = (id:number) => {
  let MIdList = {
    roleId:id
    }
    axios.post('/api/MenuRoleManagement/SearchMenuRoleMId',MIdList).then(res=>{
      //console.log(res);
      menuRoleMIdData.value = res.data.data.map((x: any) => x.id);
      //console.log(menuRoleMIdData.value);
      
    }).catch(err=>{
      console.log(err);
      
    })    
  }

</script>

<style scoped>

</style>